icon-container-size = 32px
icon-size = 20px

article
  padding 15px 30px
  position relative

  &.page
    .icon
      display none

  &.post
    .icon
      &:before
        content '\f0f6'

  &.photo
    .icon
      &:before
        content '\f030'

  &.link
    .icon
      &:before
        content '\f0c1'

  .gallery
    margin 0 -30px 16px
    overflow hidden
    position relative
    &:hover
      .control
        opacity 1
      img
        transform scale(1.1, 1.1)
        transition all 0.8s
        @media screen and (max-width:580px)
          transform none
          transition none

    img
      min-width 100%
      max-width 100%
      height auto
      position absolute
      top 0
      left 0
      opacity 0
      transition all 0.8s

    .control
      opacity 0
      transition 0.3s

    .prev, .next
      position absolute
      top 0
      width 50%
      height 100%
      cursor pointer
      &:before
        position absolute
        font 24px/1 font-icon
        text-align center
        width 24px
        text-shadow 0 0 15px rgba(0,0,0,0.5)
        color #fff
        margin-top -12px
        top 50%

    .prev
      left 0
      &:before
        content '\f053'
        left 10px

    .next
      right 0
      &:before
        content '\f054'
        right 10px

  header
    border-radius 0
    background none
    position relative
    padding 0
    border-bottom 0
    margin-bottom 10px

    .icon
      width icon-container-size
      height icon-container-size
      position absolute
      top 0px
      left 0px
      margin-left -46px
      color #FFFFFF
      background #069
      border-radius 100em
      box-shadow 0 0 4px rgba(0, 0, 0, 0.4)
      @media screen and (max-width: 600px)
        display none
      &:before
        position absolute
        font icon-size font-icon    
        top 6px
        left 0 
        width icon-container-size
        text-align center

    time
      font 0.9em font-title
      margin-bottom 5px
      display block
      line-height 1

    .title
      font-size 1.5em
      font-weight normal
      line-height 1.2
      margin 0
      padding 0
      text-shadow rgba(255, 255, 255, 0.9) 0 1px 0

      a
        color #222

        &:hover
          color color-link

  .entry
    font-size 0.95em
    text-align justify
    line-height 1.6

    h1, h2, h3, h4, h5, h6
      color #222
      padding 0
      margin 0 0 20px
      line-height 1.2

    p, ul, ol, table, dl
      margin 0 0 20px

    p
      white-space pre-wrap
      word-wrap break-word

    h1, h2, h3
      line-height 1.1

    h1
      font-size 1.75em

    h2
      color #393939

    h3, h4, h5, h6
      color #494949

    blockquote
      margin 0 -30px 20px
      padding 15px 20px 1px 40px
      font-style italic
      background #ccc
      background rgba(0, 0, 0, 0.06)
      color #222

    img, video
      max-width 98%
      border-radius 3px
      padding 5px
      background #FFFFFF
      box-shadow 0 0 8px #aaa

      &.nstyle
        border-radius 0
        padding 0
        background none
        box-shadow none

    iframe
      max-width 98%

    .caption
      display block
      margin-top 5px
      color #aaa
      position relative
      font-size 0.9em
      padding-left 25px
      &:before
        content '\f040'
        position absolute
        font 1.3em font-icon
        position absolute
        left 0
        top 3px

    code, pre
      font-family Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal
      color #333
      font-size 0.8em
      overflow-x scroll

    code
      font-size 0.8em

    pre
      padding 10px 30px
      background #3A3C42
      color #f8f8f2
      margin 0 -30px 16px

      @media screen and (max-width:580px)
        margin 0 -20px 16px
        padding 10px 20px

      code
        color #f8f8f2

      li &
        margin-left -60px
        padding-left 60px

    .gist
      article
        padding 10px

      table
        margin 0

        td
          border-bottom 0
          &.line-numbers
            font-size 12px

      pre
        margin 0 -10px 16px
        padding 10px 20px
        background #f8f8f8
        color #333

    table
      width 100%
      border-collapse collapse
      table-layout fixed

    th, td
      text-align left
      padding 5px 10px
      border-bottom 1px solid #aaa

    dt
      color #222
      font-weight 700

    th
      color #222

    small
      font-size 0.7em

    hr
      border 0
      background #aaa
      height 1px
      margin 0 0 20px

    .text-lt
      text-decoration line-through

  footer
    font-size 0.875em
    border-top 1px solid #aaa
    padding 10px 0 0 0
    margin-top 10px

    &.end-sep
      border-top none
      border-bottom 1px solid #aaa
      padding 0 0 10px 0

    a
      &:before
        font 1.1em font-icon
        padding-right 10px
        vertical-align middle

      &.more-link
        &:before
          content '\f054'

      &.comment-link
        &:before
          content '\f075'

    .categories, .tags
      margin 5px 0
      &:before
        font 1.1em font-icon
        margin-right 5px

    .categories:before
      content '\f07b'

    .tags:before
      content '\f02b'

.istop
  padding-bottom 5px
  header
    border-bottom: 1px solid #aaa;
    margin-bottom: -3px;
    padding-bottom: 8px;
